// ----- flex----
.flex
  display: flex

.flex1
  flex: 1

.flex2
  flex: 2

// --- float ----
.fr
  float: right !important
.fl
  float: left !important

.bold
  font-weight: bold !important
// ------ display -----
.block
  display: block
.in-block
  display: inline-block

// ----- text------
.underline
  text-decoration: underline
.tc
  text-align: center !important
.tl
  text-align: left !important
.tr
  text-align: right !important

.safe_area_inset_bottom
  padding-bottom: constant(safe-area-inset-bottom)
  padding-bottom: env(safe-area-inset-bottom)

.over_hide
  overflow: hidden
  height: 100px
  word-break: break-all
  text-align: left

//----- font-size
@for $i from 0 through 40
  .fz#{12 + $i}
    font-size: 12px + $i !important

//--- margin & padding
@for $i from 1 through 10
  .ml#{$i * 5}
    margin-left: 5px * $i !important

@for $i from 1 through 10
  .mt#{$i * 5}
    margin-top: 5px * $i !important

@for $i from 1 through 10
  .mr#{$i * 5}
    margin-right: 5px * $i !important

@for $i from 1 through 10
  .mb#{$i * 5}
    margin-bottom: 5px * $i !important

@for $i from 1 through 10
  .pl#{$i * 5}
    padding-left: 5px * $i !important

@for $i from 1 through 10
  .pt#{$i * 5}
    padding-top: 5px * $i !important

@for $i from 1 through 10
  .pr#{$i * 5}
    padding-right: 5px * $i !important

@for $i from 1 through 10
  .pb#{$i * 5}
    padding-bottom: 5px * $i !important
